<template>
  <div class="window">
    <facial></facial>
    <ul  class="top">
      <li>销量</li>
      <li>最新</li>
      <li>价格</li>
      <li @click="ific()">筛选</li>
    </ul>
    <div class="content">
      <div class="kouhon" v-for="clg in aStus">
        <img :src= clg.im alt="">
        <div class="tc">
          <p>{{clg.name}}</p>
          <p>{{clg.cen}}</p>
          <img src="../../../assets/two/japan.jpg" alt="">
          <img src="../../../assets/two/feiji.jpg" alt="">
          <p>海外直邮</p>
          <p>{{clg.mani}}</p>
        </div>
        <div class="btn"></div>
      </div>
    </div>
    <img src="../../../assets/two/datu.jpg" alt="" class="da">
    <section v-show="isShow" id="server-show">
      <div id="opacity-black">

      </div>
      <div class="right">
        <div class="top">
          <img src="../../../assets/two/fahuodi.jpg" alt="">
          <span>发货地</span>
        </div>
        <div class="bl" >
          <p @click="change(index)" v-for="(obj,index) in aMenu" :class="{'thingsColor':index==lala1}">
            {{obj.name}}
            <img :src="obj.img" alt="" :class="{'thingsPosi':index==lala1}" v-if="index==lala1">
          </p>
        </div>
        <div class="next">
          <img src="../../../assets/two/shangpinleixing.jpg" alt="">
          <span>商品类型</span>
          <div class="n1">
            <p @click="change2(index)" v-for="(obj,index) in aMeu1":class="{'thingsColor':index==lala2}">
              {{obj.name}}
              <img :src="obj.img" alt="" :class="{'thingsPosi':index==lala2}" v-if="index==lala2">
            </p>
          </div>
        </div>
        <div class="down">
          <img src="../../../assets/two/fenlei1.jpg" alt="">
          <span>分类</span>
          <br>
          <div class="d1" >
            <p @click="change3(index)" v-for="(obj, index) in aoDer":class="{'thingsColor':index==lala3}">
              {{obj.pic}}
              <img :src="obj.img" alt="" :class="{'thingsPosi':index==lala3}" v-if="index==lala3">
            </p>
          </div>
          <span id="more" @click="fenl">更多分类></span>
        </div>
        <div class="bottom">
          <span>重置</span>
          <span @click="entClick">确定</span>
        </div>
      </div>
    </section>
    <section v-show="iFica" id="ification">
      <div id="opacity">

      </div>
      <div class="all">
        <ul id="title-ul">
          <li @click="entClick"><img src="../../../assets/two/left.jpg" alt=""></li>
          <li>分类</li>
          <li>确定</li>
        </ul>
        <div class="categorie" v-for="skt in aoDer">
          <p @click="appear" class="ppp">{{skt.pic}}
          </p>

        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import img2 from '../../../assets/two/duihao1.png'
  import * as $ from 'jquery'
  import Facial from '../../../components/classif/Face/Facial.vue'
  export default {
    data(){
      return{
        isShow: false,
        iFica: false,
        lala1:"0",
        lala2:"0",
        lala3:"0",
        isshow111:"0",
        aMenu:[
          {
            name: '日本',
            img: img2
          },
          {
            name: '美国',
            img: img2
          },
          {
            name: '中国',
            img: img2
          },
          {
            name: '澳洲',
            img: img2
          },
          {
            name: '英国',
            img: img2
          },
        ],
        aMeu1:[
          {
            name: '促销产品',
            img: img2
          },
          {
            name: '首发商品',
            img: img2
          }
        ],
        aStus:[
          {
            im: require('../../../assets/two/chuncai.jpg'),
            name: '焕彩璀璨花蕊唇彩4.8g',
            cen: '焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g',
            mani: '¥166.06'
          },
          {
            im: require('../../../assets/two/chuncai.jpg'),
            name: '焕彩璀璨花蕊唇彩4.8g',
            cen: '焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g',
            mani: '¥166.06'
          },
          {
            im: require('../../../assets/two/chuncai.jpg'),
            name: '焕彩璀璨花蕊唇彩4.8g',
            cen: '焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g',
            mani: '¥166.06'
          },
          {
            im: require('../../../assets/two/chuncai.jpg'),
            name: '焕彩璀璨花蕊唇彩4.8g',
            cen: '焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g',
            mani: '¥166.06'
          }
        ],
        aoDer:[
          {
            pic: '洁面护理',
            img: img2
          },
          {
            pic: '人气口红',
            img: img2
          },
          {
            pic: '名牌包包',
            img: img2
          },
          {
            pic: '洁面护理',
            img: img2
          },
          {
            pic: '人气口红',
            img: img2
          },
          {
            pic: '名牌包包',
            img: img2
          },
          {
            pic: '洁面护理',
            img: img2
          },
          {
            pic: '人气口红',
            img: img2
          },
          {
            pic: '名牌包包',
            img: img2
          },
          {
            pic: '洁面护理',
            img: img2
          },
          {
            pic: '人气口红',
            img: img2
          },
          {
            pic: '名牌包包',
            img: img2
          },
          {
            pic: '洁面护理',
            img: img2
          },
          {
            pic: '人气口红',
            img: img2
          }

          ]
      }
    },
    components: {
      Facial
    },
    methods:{
      entClick(){
        this.$router.go(-1);
      },
      appear(){
        this.dada =! this.data;
//        $('.ppp').click(function () {
//          $(this).css("color", "red");
//        });
      },
      fenl() {
        this.iFica = !this.iFica;
        console.log(this.iFica);
        if(this.iFica){
          $('#ification').css({
            "width": $(window).width(),
            "height": $(window).height(),
            "position": 'fixed',
            "top": '0',
            "zIndex": 100
          })
          $('#ification').on('touchmove',function(e){
            e.preventDefault();
//          return false;
          })
        }
      },
      ific(){

        this.isShow = !this.isShow;
        console.log(this.isShow);
        if(this.isShow){
          $('#server-show').css({
            "width": $(window).width(),
            "height": $(window).height(),
            "position": 'fixed',
            "top": '0',
            "zIndex": 100
          })
          $('#server-show').on('touchmove',function(e){
            e.preventDefault();
//          return false;
          })
        }
      },
      change(index){
        this.lala1 = index;
      },
      change2(index){
        this.lala2 = index;
      },
      change3(index){
        this.lala3 = index;
      },
    }
  }
</script>
<style scoped>
  .top{
    height: 2.5rem;
    font-size: 1.3rem;
    background: white;
    background: rgb(242,242,242);
    width:35rem;
    text-align: center;
  }
  .top li{
    color: gray;
    display: inline-block;
    margin: 0.7rem 2.5rem 1rem 2.5rem;
  }
  .content{
    margin-bottom: 1rem;
  }
  .btn{
    height: 1rem;
    background: rgb(242,242,242);
  }
  .kouhon {
    overflow: hidden;
  }
  .kouhon img{
    width: 3.75rem;
    height: 7.62rem;
    margin: 1rem 3rem 1rem 3rem;
    float: left;
  }

  .tc{
    overflow: hidden;
  }
  .tc p{
    float: left;
  }
  .tc p:nth-child(1){
    font-size: 1.5rem;
    margin: 0.6rem;
    margin-left: 0;
    color: #808080;
  }
  .tc p:nth-child(2){
    color: #a9a9a9;
    font-size: 1.2rem;
  }
  .tc p:nth-child(5){
    color: #a9a9a9;
    font-size: 1.2rem;
    margin-top: 0.6rem;
  }
  .tc p:nth-child(6){
    color: #ff4500;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    float: right;
    margin-right: 1rem;
  }
  .tc img{
    height: 1.5rem;
    width: 2rem;
    margin:0.6rem;
    margin-left: 0;
  }
  .da{
    width:100%;
  }
  #opacity-black{
    width: calc(100% - 26rem);
    height: 100%;
    background-color: black;
    opacity: 0.3;
    touch-action: none;
  }
  #server-show{
    position: relative;
  }
  .right{
    width:26rem;
    height: 100%;
    background: white;
    /*float: right;*/
    position: absolute;
    top:0;
    right: 0;
  }
  .top{
    position: relative;
    background: white;
  }
  .top img{
    width: 1.8rem;
    height: 1.5rem;
    position: absolute;
    left: 1rem;
    top:1rem;
  }
  .top span{
    position: absolute;
    left: 3.3rem;
    top: 0.7rem;
    font-size: 1.5rem;
    color: dimgray;
  }
  .bl{
    border-bottom: 1px solid #f2f2f2;
    padding: 0.7rem 0 0.7rem 0;
  }
  .bl p{
    border:1px solid #f2f2f2;
    display: inline-block;
    font-size: 1.3rem;
    background-color: #f2f2f2;
    border-radius: 6px;
    color: gray;
    margin: 0.5rem;
    padding: 0.8rem 2.3rem 0.8rem 2.3rem;
  }
  .next{
    padding: 0.8rem 0 0.8rem 0.8rem;
  }
  .next img{
    width: 1.8rem;
    height: 1.5rem;
  }
  .next span{
    font-size: 1.5rem;
    color: dimgray;
    margin-left: 0.3rem;
  }
  .n1{
    border-bottom: 1px solid #f2f2f2;
  }
  .n1 p{
    border:1px solid #f2f2f2;
    display: inline-block;
    font-size: 1.3rem;
    color: gray;
    background-color: #f2f2f2;
    border-radius: 6px;
    padding: 0.8rem 1rem 0.8rem 1rem;
    margin: 0.5rem 0.9rem 1rem 0;
  }
  .down{
    padding: 0.8rem 0 0.8rem 0.8rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .down img{
    width: 1.8rem;
    height: 1.5rem;
  }
  .down span{
    font-size: 1.5rem;
    color: dimgray;
    margin-left: 0.3rem;
  }
  .d1{
    display: inline-block;
    position: relative;
  }
  .d1 p{
    border:1px solid #f2f2f2;
    display: inline-block;
    font-size: 1.3rem;
    color: gray;
    background-color: #f2f2f2;
    border-radius: 6px;
    padding: 0.8rem 1rem 0.8rem 1rem;
    margin: 0.5rem 0.9rem 0.6rem 0;
  }
  #more {
    color: lightgray;
    font-size: 1.2rem;
  }
  .bottom{
    display: flex;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin-top: 6rem;
  }
  .bottom span{
    flex: 1;
    text-align: center;
    font-size: 1.4rem;
    color: #4d4d4d;
    height: 5rem;
    line-height: 5rem;
  }
  .bottom span:nth-child(2){
    background-color: #e53e42;
    color: white;
  }
  /*分类*/
  #opacity{
    width: calc(100% - 26rem);
    height: 100%;
    background-color: black;
    opacity: 0.3;
    touch-action: none;
  }
  #ification{
    position: relative;
  }
  .all{
    width:26rem;
    height: 100%;
    background: white;
    position: absolute;
    top:0;
    right: 0;
  }
  #title-ul li{
    display: inline-block;
    font-size: 1.8rem;
  }
  #title-ul {
    padding:1rem 0rem 1rem 1rem;
    border-bottom: 1px solid #f2f2f2;
  }
  #title-ul li:nth-child(1) img{
    width:1.2rem;
    height: 1.9rem;
    margin-right: 1rem;
  }
  #title-ul li:nth-child(2){
    width:18.5rem;
    text-align: center;
  }
  #title-ul li:nth-child(3) {
    font-size: 1.5rem;
    color: gray;
  }
  .categorie{
    position: relative;
  }
  .categorie p{
    font-size: 1.2rem;
    padding:0.5rem 0rem 0.5rem 1.2rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .categorie img{
    position: absolute;
    top: 0.8rem;
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
  }
  /*动态切换样式*/
  .thingsColor{
    color: red;
  }
  .thingsBgCol{
    background-color: rgba(250,200,200,1);
  }
  .bl p, .n1 p, .d1 p{
    /*display: inline-block;*/
    position: relative;
    /*overflow: hidden;*/
  }
  .thingsPosi{
    display: inline-block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 0;
    left: 0;
  }

</style>
